import { useQuery } from '@tanstack/react-query';
import { Card, Descriptions } from 'antd';

import userService from '@/api/services/security/userService';
import { useParams } from '@/router/hooks';

import { genderMapText } from '#/publicVariable';

export default function UserDetailPage() {
  const { id } = useParams();

  const { data: user } = useQuery({
    queryKey: ['user', id],
    queryFn: () => userService.getUserById(Number(id)),
  });
  console.log(user);
  const DescriptionsItem = [
    {
      label: 'ID',
      children: user?.id,
    },
    {
      label: '账号',
      dataIndex: 'code',
      children: user?.code,
    },
    {
      label: '名称',
      dataIndex: 'name',
      children: user?.name,
    },
    {
      label: '性别',
      dataIndex: 'gender',
      children: genderMapText[user?.gender],
    },
    {
      label: '邮箱',
      dataIndex: 'email',
      children: user?.email?.option,
    },
    {
      label: '手机',
      dataIndex: 'mobile',
      children: user?.mobile?.option,
    },
    {
      label: '角色',
      dataIndex: 'roles',
      children: user?.roles?.map((role: { name: any }, index: number) => {
        if (index === user!.roles!.length - 1) {
          return `${role.name}`;
        }
        return `${role.name}, `;
      }),
    },
    {
      label: '部门',
      dataIndex: 'department',
      children: user?.meta?.DEPARTMENT.map((item: { name: string }, index: number) => {
        if (index === user!.meta!.DEPARTMENT!.length - 1) {
          return `${item.name}`;
        }
        return `${item.name}, `;
      }),
    },
    {
      label: '岗位',
      dataIndex: 'position',
      children: user?.meta?.POSITION.map((item: { name: string }, index: number) => {
        if (index === user!.meta!.POSITION!.length - 1) {
          return `${item.name}`;
        }
        return `${item.name}, `;
      }),
    },
    {
      label: '状态',
      dataIndex: 'status',
      children: user?.status === 'ENABLE' ? '启用' : '禁用',
    },
    {
      label: '备注',
      dataIndex: 'remark',
      children: user?.remark,
    },
  ];

  const basicInfo = <Descriptions bordered column={2} title="基本信息" items={DescriptionsItem} />;

  return <Card title={`${user?.name || 'ID'}的用户详情`}>{basicInfo}</Card>;
}
